﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--DXMETADATA start type="MetaCharset" --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!--DXMETADATA end-->
    <meta http-equiv="X-UA-Compatible" value="IE=9" />

    <!--DXMETADATA start type="Literal" condition="helpversion:value=3" value="<meta name=""Microsoft.Help.SelfBranded"" content=""true"" />" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<title>%%ProjectTitle%% - %%ItemTitle%%</title>" --><title>SpreadJS Documentation - Radar Chart</title><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<meta name=""Title"" content=""%%ProjectTitle%% - %%ItemTitleNoQuotes%%""/>" --><meta name="Title" content="SpreadJS Documentation - Radar Chart"/><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="jquery" filetype="script" firstlinkattributes="id=""mshs_support_script"""--><script src="template/packages/jquery/script/default/jquery-1.11.3.min.js" type="text/javascript" id="mshs_support_script"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="script"--><script src="template/packages/jquery-ui/script/default/jquery-ui-1.11.4.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/jquery-ui/css/default/jquery-ui-1.11.4.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="TemplateSettingsJson" format="<script type=""text/javascript"">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:%%TemplateSettingsJson%%});</script>" --><script type="text/javascript">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:{"dynamictoc":{"initialNodeId":"n377","initialNodeContainer":"c0","isResizable":true},"inthistopic":{"isEnabled":true},"currentLocale":"-","isFrameless":true,"navigationKind":"inpage","versions":{"locale":{"currentId":"-"}}}});</script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="light" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/light/css/dynamic-toc.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="Synopsis" StripHtmlTags="True" MaxLength="250" format="<meta name=""Description"" content=""%%Synopsis%%"" />"--><meta name="Description" content="A Radar chart (also referred to as spider chart) is a two-dimensional chart that can be used to represent multivariate data plotted in rows and columns in the graphical format." /><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/plugins-topics/css/default/jquery-plugins.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="css" firstlinkattributes=" data-mshv2-stylesheet=""/template/packages/core-topics/topics.mshv2.css"" data-mshv1-stylesheet=""/template/packages/core-topics/topics.mshv1.css"" data-responsive-mobile=""template/packages/core-topics/topics.mobile.css"" data-responsive-tablet=""template/packages/core-topics/topics.tablet.css"""--><link rel="stylesheet" type="text/css" href="template/packages/core-topics/css/topics.css"  data-mshv2-stylesheet="/template/packages/core-topics/topics.mshv2.css" data-mshv1-stylesheet="/template/packages/core-topics/topics.mshv1.css" data-responsive-mobile="template/packages/core-topics/topics.mobile.css" data-responsive-tablet="template/packages/core-topics/topics.tablet.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="script"--><script src="template/packages/plugins-topics/script/default/jquery-plugins.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="script"--><script src="template/packages/core-topics/script/topics.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="TopicId" format="<meta name=""Microsoft.Help.Id"" content=""%%TopicId%%""/>" --><meta name="Microsoft.Help.Id" content="86d55ff5-7ab8-42c8-aad0-73d5fd67df80"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocParentId" format="<meta name=""Microsoft.Help.TocParent"" content=""%%TocParentId%%""/>" --><meta name="Microsoft.Help.TocParent" content="1124f6de-499a-4032-8d2a-c338ec23d096"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocOrdinal" format="<meta name=""Microsoft.Help.TocOrder"" content=""%%TocOrdinal%%""/>" --><meta name="Microsoft.Help.TocOrder" content="9"/><!--DXMETADATA end-->
    <meta name="Microsoft.Help.F1" content=""/>
    <meta name="Microsoft.Help.ContentType" content="Concepts" />
    <!--DXMETADATA start type="MshvKeywords" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="MshvMetaTags" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.Locale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.TopicLocale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Stylesheets" --><link rel="stylesheet" type="text/css" href="stylesheets/hs-simpletab.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="StylePropertyValues" format="<style>%%StylePropertyValues%%</style>" --><style>.i-is-new .i-page-title-text::after, ul#i-dt-root li.i-is-new>a::after { content: "New" }
</style><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scripts" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="DesignTime"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_PROPERTIES" --><!--DXMETADATA end -->
    <!--DXMETADATA start type="CustomHeadContent" --><link rel="stylesheet" type="text/css" href="template/packages/core-web/css/SP.css">
<script type="text/javascript">
var currentHeader = function() {
    return "spjs";
}
</script>
<script src="template/packages/core-web/script/topNavigation.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WT462SJ"></script>
<script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ');
    </script>
<!--DXMETADATA end-->
</head>

<body>
    <div id="i-before-header-content" class="i-before-header-content">
        
    </div>

    <div id="i-header-container">
        <div id="i-header-content" class="i-header-content i-content-width-container">
            <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end-->
            <div class="i-project-title"><!--DXMETADATA start type="ProjectTitle" -->SpreadJS Documentation<!--DXMETADATA end--></div>
            <div class="i-search-container">
                <!--DXMETADATA start type="outputfileextension" format="<form action=""websearch%%outputfileextension%%"">" --><form action="websearch.html"><!--DXMETADATA end-->
                <input id="i-search" name="query"/>
                <input type="submit" id="i-search-button" value=""/>
                <!--DXMETADATA start type="Literal" value="</form>" --></form><!--DXMETADATA end-->
            </div>
            <!--DXMETADATA start type="outputfileextension" format="<a id=""i-index-button"" href=""webindex%%outputfileextension%%""></a>" --><a id="i-index-button" href="webindex.html"></a><!--DXMETADATA end-->
        </div>
    </div>
    
    <div class="i-content-width-container"><div class="i-busy-overlay"></div></div>

    <div id="i-breadcrumbs-outer-container" class="i-content-width-container"><!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="i-breadcrumbs-container">
<a href="overview.html">SpreadJS Documentation</a>
 / <a href="devguide.html">Developer's Guide</a>
 / <a href="features.html">Features</a>
 / <a href="ManagingDataVisualizationAndObjects.html">Manage Data Visualization and Objects</a>
 / <a href="Charts.html">Charts</a>
 / <a href="ChartTypes.html">Chart Types</a>
 / Radar Chart</div><!--DXMETADATA end --></div>

    

    <div id="i-actions-outer-container" class="i-content-width-container">
        <div id="i-actions-container">
            <div id="i-actions-content" class="i-fixed-to-top">
                <!-- Spacing --> <span class="i-toggle-all-sections i-function-link">
                <label class="i-collapse-all"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label>
                <label class="i-expand-all" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label>
            </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end -->
                <div class="i-in-this-topic-container">
                    <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
                </div>
            </div>
        </div>
    </div>

    <div id="i-toc-outer-container" class="i-content-width-container">
        <div id="i-toc-container">
            <div id="i-toc-content" class="i-fixed-to-top">
                <div class="i-toc-content-scroll-container">
                    <div id="i-dynamic-toc-container"><ul id="i-dt-root"></ul></div>
                </div>
            </div>
        </div>
    </div>

    <div id="i-body-content-container" class="i-content-width-container">
        <div id="i-body-content" class="i-body-content">
            <div class="i-page-title"><div class="i-page-title-text"><!--DXMETADATA start type="ItemTitle" -->Radar Chart<!--DXMETADATA end--></div></div>
            <div class="i-in-this-topic-container">
                <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
            </div>
            <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>A Radar chart (also referred to as spider chart)&nbsp;is a two-dimensional chart that can be used to represent multivariate data plotted in rows and columns&nbsp;in the graphical format.</p>

<p>SpreadJS supports radar charts in spreadsheets in order to allow users to perform dynamic data comparisons and&nbsp;carry out comprehensive information analysis. Moreover, radar charts make it easier and quicker&nbsp;to visualize and manipulate information via enabling in-depth assessment&nbsp;of the aggregate values of two or more data series.&nbsp;</p>

<h4>Working of Radar Chart</h4>

<p>Radar charts are&nbsp;typically used to compare between two or more entities over a range of characteristics. In a radar chart, three or more quantitative variables are represented on axes with each category having its own value axis radaiating from the center point. Lines are used to connect the series values and the relative position or angle of the axes is usually unpredictable.</p>

<p>Spread JS supports three types of Radar charts - 1) Basic Radar Chart 2) Filled Radar chart&nbsp;and 3) Radar Chart with markers.</p>

<h4>Example</h4>

<p>In the example shown below, the test score analysis&nbsp;for two students - Lisa and Tim&nbsp;is depicted for six&nbsp;different&nbsp;subjects - Mathematics, English, History, Biology, Geography and&nbsp;Zoology&nbsp;with the help of different types of radar charts plotted&nbsp;for the following data in the spreadsheet:</p><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img border="0" alt="" src="images/data-for-chart.png" />

<ol>
    <li>&nbsp;<strong>Basic Radar chart</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <p>An image&nbsp;depicting test score analysis of two students is shown below in a basic radar chart with areas highlighted by different line colors for each student:<br />
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img border="0" alt="" src="images/radar_basic.png" /></p>
    </li>

    <li>&nbsp;<strong>Filled Radar Chart</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <p>An image&nbsp;depicting test score analysis of two students is shown below in a filled radar chart with areas highlighted by different colored regions for each student:<br />
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img border="0" alt="" src="images/radar_filled.png" /></p>
    </li>

    <li>&nbsp;<strong>Radar Chart with Markers</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <p>An image&nbsp;depicting test score analysis of two students is shown below in a radar chart with markers representing scores for each subject along with areas highlighted by different line colors for each student:<br />
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img border="0" alt="" src="images/radar-markers.png" /></p>
    </li>
</ol>

<h4>Using Code</h4>

<p>This example code&nbsp;shows how to create a basic radar chart, filled radar chart and radar chart with markers&nbsp;in a worksheet to analyse scores of two students.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">
                    <p>&nbsp; function initSpread(spread)</p>

                    <p>{<br />
                    &nbsp;&nbsp;&nbsp;var sheet = spread.getSheet(0);<br />
                    &nbsp;&nbsp;&nbsp;var chartType = [{<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: GC.Spread.Sheets.Charts.ChartType.radar,<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;desc: 'radar'},<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; type: GC.Spread.Sheets.Charts.ChartType.radarFilled,<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;desc: 'radarFilled'<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: GC.Spread.Sheets.Charts.ChartType.radarMarkers,<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;desc: 'radarMarkers'<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}];</p>

                    <p>&nbsp;&nbsp;&nbsp;&nbsp;spread.suspendPaint();</p>

                    <p>&nbsp;&nbsp;&nbsp; var sheets = SpreadJS;<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; chartType.length; i++)</p>

                    <p>&nbsp;&nbsp;&nbsp; {<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var sheet = sheets[i];<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;initSheet(sheet, chartType[i].desc);<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;initChart(sheet, chartType[i].type);<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;customDataAreaStyle(sheet);<br />
                    &nbsp;&nbsp;&nbsp; &nbsp;}</p>

                    <p>&nbsp;&nbsp; &nbsp;&nbsp; spread.options.tabStripRatio = 0.8;</p>

                    <p>&nbsp;&nbsp; &nbsp;&nbsp; spread.resumePaint();</p>

                    <p>}</p>

                    <p>&nbsp; function initSheet(sheet, sheetName)</p>

                    <p>{<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;sheet.name(sheetName);</p>

                    <p>&nbsp;&nbsp;&nbsp; // Add data for chart<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; var dataArray =</p>

                    <p>&nbsp;&nbsp;&nbsp;&nbsp; [<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['', 'Lisa', 'Tim'],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['Mathematics', 87, 64],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['English', 79, 59],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['History ', 58, 75],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ['Biology', 64, 96],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['Geography', 49, 85],<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;['Zoology', 64, 83]<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;];</p>

                    <p>&nbsp;&nbsp;&nbsp;&nbsp;sheet.setArray(1, 1, dataArray);<br />
                    }</p>

                    <p>&nbsp;&nbsp;function customDataAreaStyle(sheet)</p>

                    <p>{<br />
                    &nbsp;&nbsp;sheet.setColumnWidth(0, 20);<br />
                    &nbsp;&nbsp;for (var i = 1; i &lt; 4; i++)</p>

                    <p>&nbsp;&nbsp;&nbsp;&nbsp; {<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sheet.setColumnWidth(i, 100);<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</p>

                    <p>&nbsp;&nbsp;&nbsp;sheet.options.gridline.showHorizontalGridline = false;<br />
                    &nbsp;&nbsp;&nbsp;sheet.options.gridline.showVerticalGridline = false;</p>

                    <p>&nbsp;&nbsp;&nbsp;sheet.getRange(1, 1, 7, 3)<br />
                    &nbsp;&nbsp;&nbsp;.hAlign(GC.Spread.Sheets.HorizontalAlign.center)<br />
                    &nbsp;&nbsp;&nbsp;.setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin),&nbsp;&nbsp;</p>

                    <p>&nbsp;&nbsp; { all: true });</p>

                    <p>&nbsp;&nbsp;&nbsp;sheet.getRange(1, 2, 1, 3).font('bold normal 10pt Arial');<br />
                    &nbsp;&nbsp;&nbsp;sheet.getRange(2, 1, 6, 1).font('bold normal 10pt Arial');<br />
                    }</p>

                    <p>&nbsp;&nbsp;function initChart(sheet, charType)</p>

                    <p>{<br />
                    &nbsp;&nbsp; // Add chart<br />
                    &nbsp;&nbsp;&nbsp; var chart = sheet.charts.add(sheet.name() + ' Chart', charType, 250, 0, 500, 410,&nbsp;</p>

                    <p>&nbsp;&nbsp;&nbsp; '$B$2:$D$7');<br />
                    &nbsp;&nbsp;</p>

                    <p>&nbsp; // Customize chart style<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; changeChartLegend(chart);<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;changeChartArea(chart);<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;changeChartDataLabels(chart);<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;changeChartTitle(chart);<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;changeChartAxes(chart);<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;changeChartSeries(chart);<br />
                    }</p>

                    <p>&nbsp; function changeChartLegend(chart)</p>

                    <p>{<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; var legend = chart.legend();<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; legend.visible = true;<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; legend.position = GC.Spread.Sheets.Charts.LegendPosition.bottom;<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; chart.legend(legend);<br />
                    }</p>

                    <p>&nbsp; function changeChartArea(chart)</p>

                    <p>{<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; var chartArea = chart.chartArea();<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; chartArea.fontSize = 14;<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; chart.chartArea(chartArea);<br />
                    }</p>

                    <p>&nbsp; function changeChartDataLabels(chart)</p>

                    <p>{<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; var dataLabels = chart.dataLabels();<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; dataLabels.showValue = true;<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; dataLabels.showSeriesName = false;<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; dataLabels.showCategoryName = false;<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; dataLabels.position = GC.Spread.Sheets.Charts.DataLabelPosition.above;<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; chart.dataLabels(dataLabels);<br />
                    }</p>

                    <p>&nbsp;&nbsp;function changeChartTitle(chart)</p>

                    <p>{<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; var title = chart.title();<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; title.text = 'Test Score Analysis';<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; title.fontSize = 22;<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; title.color = "#b20000";<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; title.fontFamily = 'Cambria';<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;chart.title(title);<br />
                    }</p>

                    <p>&nbsp;&nbsp;&nbsp;function changeChartAxes(chart)</p>

                    <p>{<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; var axes = chart.axes();<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; axes.primaryCategory.style.color = '#000000';<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; axes.primaryValue.majorGridLine.color = '#ccc';<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; chart.axes(axes);<br />
                    }</p>

                    <p>&nbsp;&nbsp; function changeChartSeries(chart)</p>

                    <p>{<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; var series = chart.series();</p>

                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var lisaSeries = series.get(0);<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; lisaSeries.border.color = 'skyblue';<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; lisaSeries.backColor = 'skyblue';<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; lisaSeries.backColorTransparency = '0.5';<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; series.set(0, lisaSeries);</p>

                    <p>&nbsp;&nbsp;&nbsp;&nbsp; var timSeries = series.get(1);<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; timSeries.border.color = 'orange';<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; timSeries.backColor = 'orange';<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; timSeries.backColorTransparency = '0.5';<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; series.set(1, timSeries);<br />
                    }</p>
                </td>
            </tr>
        </tbody>
    </table>
</div><!--DXMETADATA end-->
            <a name="seealsobookmark"></a>
            <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end-->
            
            <div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px" /><p><p>Copyright © 2019 GrapeCity, Inc. All rights reserved.</p>
<p><a href="https://www.grapecity.com/en/forums/winforms-edition" target="_blank">Product Support Forum</a> | <a href="javascript:window.print()">Print this page</a></p>
<ul class="social">
<li><a href="https://www.facebook.com/GrapeCityUS/" target="_blank" class="facebook">&nbsp;</a></li>
<li><a href="https://twitter.com/GrapeCityUS" target="_blank" class="twitter">&nbsp;</a></li>
<li><a href="https://www.linkedin.com/company/grapecity" target="_blank" class="linkedin">&nbsp;</a></li>
</ul>
</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><!--DXMETADATA end-->
            </div>
        </div>
    </div>
        
    <script type="text/javascript">
        $(function () {
            var documentInstance = new Innovasys.Content.Document(document.body);
            documentInstance.load();
        });
    </script>
</body>
</html>
